<template>
    <div>
        <el-card class="box-card">
            <div style="margin-top: 25px">
                <el-row style="margin-bottom: 20px">
                    <el-col :span="24"><div class="grid-content bg-purple-dark">
                        <span style="font-size: 25px;">登录</span>
                    </div></el-col>
                </el-row>

                <el-row>
                    <el-col :span="7" class="labClass"><div class="grid-content bg-purple">
                        <span style="">用户名: </span>
                    </div></el-col>
                    <el-col :span="14"><div class="grid-content bg-purple-light">
                        <el-input v-model="username" placeholder="请输入用户名"></el-input>
                    </div></el-col>
                    <el-col :span="3" class="labClass"><div class="grid-content bg-purple">
                        *
                    </div></el-col>
                </el-row>

                <p>
                    <el-row>
                        <el-col :span="7" class="labClass"><div class="grid-content bg-purple">
                            <span>用户密码: </span>
                        </div></el-col>
                        <el-col :span="14" ><div class="grid-content bg-purple-light">
                            <el-input placeholder="请输入密码" v-model="pwd" show-password></el-input>
                        </div></el-col>
                        <el-col :span="3" class="labClass"><div class="grid-content bg-purple">
                            *
                        </div></el-col>
                    </el-row>
                </p>
                <el-button type="primary" @click="login">登录</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "User",
        data(){
            return{
                username:"",
                pwd:"",
            }
        },
        methods:{
            login(){
                this.axios.get("mt/user/login/"+this.username+"/"+this.pwd).then(
                    r => {
                        // console.log(r.data)
                        if (r.data.code == "ok"){
                            this.$store.state.user = r.data;
                            this.$router.push("/MeiTuan")
                        }else if(r.data.code == "no"){
                            this.$message.error("登录失败")
                        }
                    }
                );
            }
        }
    }
</script>

<style scoped>
    .labClass{
        margin-top: 15px;
    }
    .box-card{
        height: 270px;
        margin-top: 10%;
        margin-left: 30%;
        margin-right: 30%;
    }
</style>